<template>
  <el-dialog v-model="show" width="1100px" title="添加房型" append-to-body :close-on-click-modal="false">
    <el-table v-loading="loading" :data="roomList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" :selectable="selectable" />
      <el-table-column type="index" width="55" label="序号" align="center" />
      <el-table-column label="房型图片" align="center" prop="photo" width="100">
        <template #default="scope">
          <el-image style="width: 40px;height: 40px" :src="scope.row.photo.split(',')[0]" :preview-src-list="scope.row.photo.split(',')" />
        </template>
      </el-table-column>
      <el-table-column label="房型" align="center" prop="roomType" />
      <el-table-column label="床型" align="center" prop="bedType" />
      <el-table-column label="入住人数" align="center" prop="occupantsNum" />
      <el-table-column label="是否含早餐" min-width="90" align="center" prop="breakfastFlag">
        <template #default="scope">
          {{ scope.row.breakfastFlag=='1'?'是':'否' }}
        </template>
      </el-table-column>
      <el-table-column label="早餐数" align="center" prop="breakfastNum">
        <template #default="scope">
          {{ scope.row.breakfastFlag=='1'?scope.row.breakfastNum:'--' }}
        </template>
      </el-table-column>
      <el-table-column label="是否有窗户" min-width="90" align="center" prop="windowFlag">
        <template #default="scope">
          {{ scope.row.windowFlag=='1'?'是':'否' }}
        </template>
      </el-table-column>
      <el-table-column label="是否有独立卫浴" min-width="120" align="center" prop="bathroomFlag">
        <template #default="scope">
          {{ scope.row.bathroomFlag=='1'?'是':'否' }}
        </template>
      </el-table-column>
      <el-table-column label="是否可加床" min-width="90" align="center" prop="addBedFlag">
        <template #default="scope">
          {{ scope.row.addBedFlag=='1'?'是':'否' }}
        </template>
      </el-table-column>
      <el-table-column label="面积" align="center" prop="area" />
    </el-table>

    <template #footer>
      <div class="dialog-footer text-center">
        <el-button type="primary" @click="sure">确 定</el-button>
        <el-button @click="show=false">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

import { getCurrentInstance, ref, watch } from 'vue'
import { addActivityRoomBatch, listActivityRoom } from '@/api/logex/activityRoom'
import { listHotelRoom } from '@/api/logex/hotelRoom'
import _ from 'lodash'


const emit = defineEmits(['complete'])
const { proxy } = getCurrentInstance()

let matchId = null
let acHotelId = null

const show = ref(false)
const roomList = ref([])
const loading = ref(true)
const total = ref(0)
const ids = ref([])
const chooseRooms = ref([])

watch(show, (val) => {
  if (!val) {
    roomList.value = []
    total.value = 0
    ids.value = []
    matchId = null
    acHotelId = null
  }
})

function getList(hotelId) {
  loading.value = true
  listHotelRoom({
    hotelId: hotelId,
    status: '1'
  }).then(res => {
    roomList.value = res.rows
    loading.value = false
  })
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
}


function sure() {
  if (ids.value.length === 0) {
    proxy.$modal.msgWarning('请选择房型')
    return
  }

  addActivityRoomBatch({
    activityId: matchId,
    acHotelId: acHotelId,
    roomIds: ids.value.join(',')
  }).then((res) => {
    proxy.$modal.msgSuccess(res.msg)
    show.value = false
    emit('complete', acHotelId)
  })
}

function selectable(row) {
  return !_.some(chooseRooms.value, (r) => {
    return r.roomId === row.id
  })
}

function open(params) {
  show.value = true
  matchId = params.matchId
  acHotelId = params.rowId

  getList(params.hotelId)

  chooseRooms.value = []
  listActivityRoom({
    hotelId: acHotelId
  }).then(res => {
    chooseRooms.value = res.rows
  })
}
defineExpose({
  open
})

</script>

<style scoped>

</style>
